<template>
  <div class="user animated fadeInUp">
    <pageSearch :formConfig="formConfig" @search="search" @reset="reset" />
    <div class="user-content">
      <page-Content
        :columnsList="propList"
        @editBtnClick="handlerEditData"
        @newBtnClick="handlerNewData"
        :pageName="'user'"
        ref="pageContentRef"
      >
        <template #enable="{ row }">
          <el-button
            :type="row.enable ? 'success' : 'danger'"
            size="mini"
            plain
          >
            {{ row.enable === 1 ? '启用' : '关闭' }}
          </el-button>
        </template>
      </page-Content>
    </div>

    <page-Model
      v-model:value="modelData"
      v-model:show="dialogShow"
      :modelConfig="modelComputedRef"
      :loading="dialogLoading"
      :pageName="'users'"
      :rowId="rowId"
      ref="refPageModel"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { formConfig } from './config/search.config';
import { propList } from './config/content.config';
import { modelConfig } from './config/model.config';
import { usePageSearch } from '@/hooks/usePageSearch';
import { usePageModel } from '@/hooks/usePageModel';
import { useStore } from '@/store';

import pageSearch from '@/components/pageSearch/pageSearch.vue';
import pageContent from '@/components/pageContent';
import pageModel from '@/components/pageModel';

// ? 编辑还是新增
export default defineComponent({
  setup() {
    const store = useStore();
    const { search, reset, pageContentRef } = usePageSearch();
    const rowId = ref<null | number>(null);

    const { modelData, setModelData, clearModelData, searchFormItem } =
      usePageModel(modelConfig);

    const dialogShow = ref(false);
    const refPageModel = ref<InstanceType<typeof pageModel>>();

    const showDialog = function () {
      const value = refPageModel.value;
      value && value.show();
    };

    const setPasswordVisible = (flag: boolean) => {
      const item = searchFormItem('password');
      item && (item.isHide = flag);
    };

    const handlerNewData = function () {
      rowId.value = null;
      setPasswordVisible(false);
      clearModelData();
      showDialog();
    };

    const handlerEditData = function (row) {
      rowId.value = row.id;
      setPasswordVisible(true);
      setModelData(row);
      showDialog();
    };

    const modelComputedRef = computed(() => {
      const departmentItem = modelConfig.value.formItems.find(
        (o) => o.key === 'departmentId'
      );
      if (departmentItem) {
        // ? vue-x 的响应式系统只会在 template computed watch 等地方才是响应式
        departmentItem.options = store.state.entireDepartment;
      }
      return modelConfig.value;
    });

    const dialogLoading = ref(false);

    return {
      dialogShow,
      formConfig,
      propList,
      modelComputedRef,

      pageContentRef,
      search,
      reset,

      modelData,
      rowId,
      dialogLoading,
      refPageModel,

      handlerNewData,
      handlerEditData,
    };
  },

  components: {
    pageSearch,
    pageContent,
    pageModel,
  },
});
</script>

<style lang="less" scoped>
.user {
  height: 100%;

  .user-content {
    height: calc(100% - 323px - 60px);
  }
}
</style>
